<template>
  <div class="mine">
    <!-- <functional-title  title="我的" :border=false /> -->
    <van-nav-bar  title="我的" :border=false />
    <van-cell-group style="margin-top: -1px">
      <van-cell class="login-bg" style="color: #f5f6fa;"
                label-class="labelClass"
                is-link
                center>
        <template slot="title">
          <!-- 已登录状态 -->
          <div class="person-msg"
               v-if="userInfo.token"
               @click="goToPage('UserCenter')">
            <img class="icon-image" :src="user_image.login_icon" alt="">
            <div class="sex" v-if="userInfo.sex">
              <img :src="userInfo.sex == '1'? user_image.female : user_image.male"  alt="">
            </div>
            <div class="person-info" v-if="userInfo.token">
              <span>{{userInfo.user_name}}</span>
              <span>手机：{{phoneNumber}}</span>
            </div>
          </div>
          <!-- 未登录状态 -->
          <div class="person-msg" v-if="!userInfo.token">
            <img class="icon-image" :src="user_image.noLogin_icon" alt="">
            <div class="person-info" v-if="!userInfo.token">
              <div @click="goToPage('Login')">立即登录</div>
            </div>
          </div>
        </template>
      </van-cell>
    </van-cell-group>
    <!-- 订单相关-->
    <van-cell-group>
      <van-cell title="我的订单"
                icon="label"
                value="查看全部订单"
                is-link
                @click="goToMyOrder(-1)">
      </van-cell>
      <van-grid :border=false>
        <van-grid-item v-for="(order,index) in orderData"
                       :key="index"
                       :icon="order.icon"
                       :text="order.title"
                       @click="goToMyOrder(index)" />
      </van-grid>
    </van-cell-group>

    <van-cell-group style="margin-top: 7px">
      <van-cell title="我的优惠券"
                icon="gold-coin"
                :value="userInfo.token?'2':''"
                @click="goToPage('CouponList')"
                is-link />
      <van-cell title="我的收货地址"
                icon="todo-list"
                is-link
                @click="goToPage('MyAddress')" />
    </van-cell-group>
    <!-- 绿卡 -->
    <van-cell-group style="margin-top:7px">
      <van-cell is-link icon="vip-card"  @click="goToPage('MyVip')">
        <template #title>
          <span class="custom-title">我的绿卡</span>
          <van-tag type="danger" :round=true>NEW</van-tag>
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group style="margin-top:7px">
      <!-- 联系客服 -->
      <van-cell title="联系客服"
                icon="phone"
                value="客服时间 07:00-22:00"
                is-link />
      <!-- 意见反馈 -->
      <van-cell title="意见反馈"
                icon="comment-circle"
                is-link
                @click="onFeedBack" />
    </van-cell-group>

    <!--路由的出口-->
    <transition name="router-slider" mode="out-in">
      <router-view />
    </transition>
  </div>
</template>

<script>
// import FunctionalTitle from '@/components/FunctionalTitle'
import { mapGetters } from 'vuex'

export default {
  data () {
    return {
      // 头像
      user_image: {
        login_icon: require('@/assets/img/mine/defaultImgs.jpg'),
        noLogin_icon: require('@/assets/img/login/avatar.jpeg'),
        female: require('@/assets/img/mine/female.png'),
        male: require('@/assets/img/mine/male.png')
      },
      // 订单状态
      orderData: [
        { icon: 'cart-circle-o', title: '待支付' },
        { icon: 'gift-o', title: '待收货' },
        { icon: 'smile-comment-o', title: '待评价'},
        { icon: 'cash-back-record', title: '售后退款' }
      ],
    }
  },
  components: {
    // FunctionalTitle
  },
  mounted () {
    console.log(this.userInfo)
  },
  computed: {
    ...mapGetters(['userInfo']),
    phoneNumber () {
      // 设置隐藏手机号中间四位
      const mobile = String(this.userInfo.phone)
      const reg = /^(\d{3})\d{4}(\d{4})$/
      return mobile.replace(reg, '$1****$2')
    }
  },
  methods: {
    // 跳转到我的订单
    goToMyOrder (index) {
      if (index !== 3) {
        return this.$router.push({ name: "MyOrder", params: { active: index + 1 } })
      }
      // 跳转到售后退款界面
      this.$toast({
        message: '退款页面尚未开通啦!',
        duration: 1500
      })
    },
    goToPage (name) {
      this.$router.push({ name }) //  name: 'name'
    },
    // 意见反馈
    onFeedBack () {
      this.$dialog.alert({
        confirmButtonText: '记得点个小星❤️哦~',
        title: '感谢您的关注',
        message: '欢迎提出优化建议'
      }).then(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.mine {
  width: 100%;
  margin-bottom: px2rem(52);
  background-color: $bg-color-page;
  /deep/ .login-bg {
    background-image: linear-gradient(#ee0a24, #9b8083);
    background-size: 180%;
  }
  .van-nav-bar {
    background-color:#ee0a24;
    font-size: px2rem(10);
    height: px2rem(44);
  }
  .van-nav-bar /deep/ .van-nav-bar__title {
    color: $text-color-white;
  }
  .person-msg {
    height: px2rem(70);
    display: flex;
    align-items: center;
    .sex {
      position: absolute;
      top: px2rem(61);
      left: px2rem(66);
      @include setWH(px2rem(2), px2rem(2));
      img {
        @include setWH(px2rem(17), px2rem(17));
      }
    }
    .icon-image {
      @include setWH(px2rem(70), px2rem(70));
      border-radius: 50%;
    }
    .person-info {
      display: flex;
      flex-direction: column;
      margin-left: px2rem(14);
    }
  }
  .van-cell__left-icon {
    @include setFontColor(px2rem(21), $theme-color-red);
  }
  /*转场动画*/
  .router-slider-enter-active,
  .router-slider-leave-active {
    transition: all .3s;
  }

  .router-slider-enter,
  .router-slider-leave-active {
    transform: translate3d(px2rem(35), 0, 0);
    opacity: 0;
  }

}
</style>
